<ix-modal-header
  [requiredRoles]="requiredRoles"
  [title]="'Cloud Sync Task Wizard' | translate"
  [loading]="!!(mergedLoading$ | async)"
></ix-modal-header>

<mat-card>
  <mat-card-content>
    <mat-vertical-stepper [linear]="true">
      <ix-use-ix-icons-in-stepper></ix-use-ix-icons-in-stepper>

      <mat-step [completed]="!!existingCredential">
        <ng-template matStepLabel>{{ 'Provider' | translate }}</ng-template>
        <ix-cloudsync-provider
          (save)="onProviderSaved($event)"
          (loading)="onProviderLoading($event)"
        ></ix-cloudsync-provider>
      </mat-step>

      <mat-step [stepControl]="whatAndWhen()?.form">
        <ng-template matStepLabel>{{ 'What and When' | translate }}</ng-template>
        <ix-cloudsync-what-and-when
          [credentialId]="existingCredential?.id"
          (save)="onSubmit()"
        ></ix-cloudsync-what-and-when>
      </mat-step>
    </mat-vertical-stepper>
  </mat-card-content>
</mat-card>
